<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
  <head th:fragment="common-header">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业培训平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
</head>
<body>

<div class="left-sidebar" th:fragment="header">
  <style>
    /* --- 颜色和尺寸变量，方便统一管理 --- */
    :root {
      --sidebar-bg: #2c3e50; /* 背景色 */
      --sidebar-text-color: #ecf0f1; /* 文字颜色 */
      --sidebar-width: 240px;
      --active-bg: #3498db; /* 激活项背景色 */
      --hover-bg: #34495e; /* 悬停项背景色 */
      --active-indicator: #5dade2; /* 激活项左侧竖条颜色 */
    }

    .left-sidebar {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: var(--sidebar-width);
      background-color: var(--sidebar-bg);
      color: var(--sidebar-text-color);
      display: flex;
      flex-direction: column;
      padding: 15px 0;
      box-shadow: 3px 0 15px rgba(0, 0, 0, 0.15); /* 阴影更柔和 */
      z-index: 1000;
    }

    .sidebar-header {
      padding: 15px 25px;
      text-align: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 添加一个细微的底部分隔线 */
    }

    .sidebar-header h3 {
      margin: 0;
      font-size: 1.5em;
      color: #ffffff;
      font-weight: 600;
      letter-spacing: 1px; /* 增加文字间距 */
    }

    .sidebar-menu {
      list-style: none;
      padding: 0 15px;
      margin: 20px 0 0 0;
      flex-grow: 1;
      overflow-y: auto; /* 当菜单项过多时可以滚动 */
    }
    /* 美化滚动条 (可选) */
    .sidebar-menu::-webkit-scrollbar { width: 5px; }
    .sidebar-menu::-webkit-scrollbar-thumb { background: #555; border-radius: 10px; }
    .sidebar-menu::-webkit-scrollbar-track { background: transparent; }

    .menu-item a {
      display: flex;
      align-items: center;
      padding: 14px 20px;
      color: var(--sidebar-text-color);
      text-decoration: none;
      border-radius: 6px;
      margin-bottom: 8px;
      position: relative; /* 为伪元素定位 */
      overflow: hidden;
      /* 关键: 所有变化的过渡效果 */
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    /* --- 全新的激活状态指示器 --- */
    .menu-item a.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 4px; /* 竖条宽度 */
      background-color: var(--active-indicator);
      box-shadow: 0 0 10px var(--active-indicator); /* 添加辉光效果 */
    }

    /* --- 增强的悬停效果 --- */
    .menu-item a:hover {
      background-color: var(--hover-bg);
      color: #ffffff;
      transform: translateX(5px); /* 整体轻微右移 */
    }

    .menu-item a.active {
      background-color: var(--active-bg);
      color: #ffffff;
      font-weight: 500;
    }

    .menu-item a .fa {
      margin-right: 15px;
      width: 20px;
      text-align: center;
      font-size: 1.1em;
      transition: transform 0.3s ease; /* 图标过渡效果 */
    }

    /* --- 全新的图标悬停动效 --- */
    .menu-item a:hover .fa {
      transform: rotate(10deg) scale(1.1); /* 悬停时图标轻微旋转放大 */
    }

    .menu-item a .menu-text {
      font-weight: 400; /* 字体更平滑 */
    }

    .logout-item {
      padding: 0 15px;
    }
  </style>

  <div class="sidebar-header">
    <h3>企业培训平台</h3>
  </div>

  <ul class="sidebar-menu">
    <li class="menu-item" th:if="${loggedInUser != null}">
      <a th:if="${loggedInUser.role == 'STUDENT'}"
         th:href="@{/student/dashboard}"
         th:classappend="${#httpServletRequest.requestURI.startsWith('/student/dashboard') ? 'active' : ''}">
        <i class="fa fa-dashboard"></i> <span class="menu-text">仪表盘</span>
      </a>
      <a th:if="${loggedInUser.role == 'TEACHER'}"
         th:href="@{/teacher/dashboard}"
         th:classappend="${#httpServletRequest.requestURI.startsWith('/teacher/dashboard') ? 'active' : ''}">
        <i class="fa fa-dashboard"></i> <span class="menu-text">仪表盘</span>
      </a>
    </li>

    <th:block th:if="${session.loggedInUser != null}">
      <th:block th:if="${session.loggedInUser.role == 'TEACHER'}">
        <li class="menu-item">
          <a th:href="@{/course/manage}" th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/course') ? 'active' : ''}">
            <i class="fa fa-book"></i> <span class="menu-text">课程管理</span>
          </a>
        </li>
        <li class="menu-item">
          <a th:href="@{/student/manage}" th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/student') ? 'active' : ''}">
            <i class="fa fa-user-circle-o"></i> <span class="menu-text">学生管理</span>
          </a>
        </li>
        <li class="menu-item">
          <a th:href="@{/class/manage}" th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/class') ? 'active' : ''}">
            <i class="fa fa-users"></i> <span class="menu-text">班级管理</span>
          </a>
        </li>
        <li class="menu-item">
          <a th:href="@{/practice/manage}" th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/practice') ? 'active' : ''}">
            <i class="fa fa-pencil-square-o"></i> <span class="menu-text">实践管理</span>
          </a>
        </li>
        <li class="menu-item">
          <a th:href="@{/info/manage}" th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/info') ? 'active' : ''}">
            <i class="fa fa-newspaper-o"></i> <span class="menu-text">资讯管理</span>
          </a>
        </li>
        <li class="menu-item">
          <a th:href="@{/qa/browse}" th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/qa') ? 'active' : ''}">
            <i class="fa fa-question-circle"></i> <span class="menu-text">问答社区</span>
          </a>
        </li>
        <li class="menu-item">
          <a th:href="@{/teacher/comments/manage}" th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/teacher/comments') ? 'active' : ''}">
            <i class="fa fa-comments"></i> <span class="menu-text">评论管理</span>
          </a>
        </li>
      </th:block>

      <th:block th:if="${session.loggedInUser.role == 'STUDENT'}">
        <li class="menu-item">
          <a th:href="@{/student/classes}" th:classappend="${#httpServletRequest.getRequestURI().startsWith('/student/classes') ? 'active' : ''}">
            <i class="fa fa-graduation-cap"></i> <span class="menu-text">我的班级</span>
          </a>
        </li>
        <li class="menu-item">
          <a th:href="@{/course/browse}" th:classappend="${#httpServletRequest.getRequestURI().startsWith('/course/browse') ? 'active' : ''}">
            <i class="fa fa-graduation-cap"></i> <span class="menu-text">浏览可选课程</span>
          </a>
        </li>
        <li class="menu-item">
          <a th:href="@{/student/cart}" th:classappend="${#httpServletRequest.getRequestURI().startsWith('/student/cart') ? 'active' : ''}">
            <i class="fa fa-graduation-cap"></i> <span class="menu-text">查看购物车</span>
          </a>
        </li>
        <li class="menu-item">
          <a th:href="@{/student/my-courses}" th:classappend="${#httpServletRequest.getRequestURI().startsWith('/student/my-courses') ? 'active' : ''}">
            <i class="fa fa-graduation-cap"></i> <span class="menu-text">我的课程</span>
          </a>
        </li>
        <li class="menu-item">
          <a th:href="@{/student/practice/browse}" th:classappend="${#httpServletRequest.getRequestURI().startsWith('/student/practice/browse') ? 'active' : ''}">
            <i class="fa fa-search"></i> <span class="menu-text">浏览所有实践</span>
          </a>
        </li>
        <li class="menu-item">
          <a th:href="@{/student/practice/my-enrollments}" th:classappend="${#httpServletRequest.getRequestURI().startsWith('/student/practice/my-enrollments') ? 'active' : ''}">
            <i class="fa fa-flask"></i> <span class="menu-text">我的实践</span>
          </a>
        </li>
        <li class="menu-item">
          <a th:href="@{/course/collected-courses}" th:classappend="${#httpServletRequest.getRequestURI().startsWith('/course/collected-courses') ? 'active' : ''}">
            <i class="fa fa-star"></i> <span class="menu-text">我的收藏</span>
          </a>
        </li>
        <li class="menu-item">
          <a th:href="@{/info/browse}" th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/info') ? 'active' : ''}">
            <i class="fa fa-globe"></i> <span class="menu-text">资讯中心</span>
          </a>
        </li>
        <li class="menu-item">
          <a th:href="@{/qa/browse}" th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/qa') ? 'active' : ''}">
            <i class="fa fa-comments-o"></i> <span class="menu-text">问答社区</span>
          </a>
        </li>
        <li class="menu-item">
          <a th:href="@{/student/my-qa}" th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/student/my-qa') ? 'active' : ''}">
            <i class="fa fa-question"></i> <span class="menu-text">我的问答</span>
          </a>
        </li>







      </th:block>
    </th:block>
  </ul>

  <ul style="list-style: none; padding: 0; margin: 0;">
    <th:block th:if="${session.loggedInUser != null}">
      <li class="menu-item logout-item">
        <a th:href="@{/logout}">
          <i class="fa fa-sign-out"></i> <span class="menu-text">退出登录</span>
        </a>
      </li>
    </th:block>
    <th:block th:if="${session.loggedInUser == null}">
      <li class="menu-item">
        <a th:href="@{/login}" th:classappend="${#httpServletRequest.getRequestURI() == '/login' ? 'active' : ''}">
          <i class="fa fa-sign-in"></i> <span class="menu-text">登录</span>
        </a>
      </li>
      <li class="menu-item">
        <a th:href="@{/register}" th:classappend="${#httpServletRequest.getRequestURI() == '/register' ? 'active' : ''}">
          <i class="fa fa-user-plus"></i> <span class="menu-text">注册</span>
        </a>
      </li>
    </th:block>
  </ul>
</div>

</body>
</html>